<template>
    <div>
        <van-index-bar :index-list="computedCityIndex">
            <div v-for="(each_item,index_out) in citylist" :key="index_out">
                <van-index-anchor :index="each_item.type" />
                <van-cell :title="data.name" v-for="(data,index_in) in each_item.item" :key="index_in" @click.stop="to_cinema(data.name,data.cityId)"/>
            </div>
        </van-index-bar>
    </div>
</template>

<script>
    import axios from 'axios'
    import Vue from 'vue';
    import { IndexBar, IndexAnchor,Cell } from 'vant';

    Vue.use(IndexBar).use(Cell);
    Vue.use(IndexAnchor);
    export default {
        name: "city",
        data(){
          return {
             citylist:[],
          }
        },
        methods:{
            handleData(data){
                let letterArr=[]
                for(let i=65;i<=90;i++){
                    console.log(String.fromCharCode(i));
                    letterArr.push(String.fromCharCode(i))
                }
                letterArr.forEach((letter)=>{
                    const list=data.filter(item=>item.pinyin.substring(0,1).toUpperCase() === letter)
                    console.log(list)
                    if(list.length>0){
                        this.citylist.push({
                            type:letter,
                            item:list,
                        })
                    }

                })
                console.log('最终结果',this.citylist)
                console.log(this.citylist.map(item=>item.type))
            },
            to_cinema(name,cityID){
                this.$store.commit('changeCityName',name)
                this.$store.commit('changeCityID',cityID)
                this.$router.back();
            }
        },
        computed:{
            computedCityIndex(){
                return this.citylist.map(item=>item.type);
            },
        },
        mounted() {
            axios({
                url:'https://m.maizuo.com/gateway?k=7022161',
                headers:{
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1614558948631982962769921","bc":"310100"}',
                    'X-Host': 'mall.film-ticket.city.list',
                }
            }).then(res=>{
                console.log(res.data.data.cities)
                this.handleData(res.data.data.cities)
            }).catch(err=>{
                console.log(err)
            })
        },

    }
</script>

<style scoped>

</style>